.purchaseVip {
  padding: 32rpx;

  .notice {
    width: 100%;
    background-color: rgba($color: #FF3B30, $alpha: 0.1);
    position: fixed;
    left: 0;
    box-sizing: border-box;
    padding: 8rpx 32rpx;
    top: 0;
    font-size: 24rpx;
  }
  .header {
    width: 100%;
    height: 182rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .card {
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0px 10rpx 40rpx #0000000d;
  }

  .diamond {
    width: 60rpx;
    height: 60rpx;
  }

  .denomination {
    padding: 32rpx;
    margin-top: 32rpx;

    &-list {
      display: grid;
      gap: 32rpx;
      width: 100%;
      margin-top: 40rpx;
      grid-template-columns: repeat(3, 1fr);

      .item {
        height: 100rpx;
        border-radius: 20rpx;
        color: #fff;
        font-size: 32rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0.5;
        background-color: #FFC02D;

        .suffix {
          font-size: 20rpx;
          margin-left: 4rpx;
        }

        .price {
          font-size: 20rpx;
        }
      }

      .item-active{
        opacity: 1;
      }
    }
  }

  .purchase-box {
    padding: 40rpx 52rpx;
    margin-top: 32rpx;

    .btns {
      display: flex;
      justify-content: space-between;
    }
    .bank-info {
      line-height: 60rpx;
    }
  }
}